// 导入axios
import axios from 'axios'
// 设置axios的基地址
// 有多少个基地址就克隆多少个axios对象
// ax1 = 克隆的axios 对应基地址1
// ax2 = 克隆的axios 对应基地址2
// 用ax1发基地址1的请求，用ax2发基地址2的请求.....

// 克隆出一个新的axios对象
const request = axios.create({
  // baseURL: 'http://toutiao.itheima.net/'
  baseURL: 'http://geek.itheima.net/'
})

// 导入store
import store from '@/store'
import router from '@/router'
import { Toast } from 'vant'
// 给request对象加请求拦截器
request.interceptors.request.use(
  (config) => {
    // 给每个请求自动加token
    // 有token才加，没token就不加
    if (store.state.tokenObj.token) {
      config.headers.Authorization = 'Bearer ' + store.state.tokenObj.token
    }
    return config
  },
  (err) => {}
)

// 给request对象加响应拦截器
request.interceptors.response.use(
  function (response) {
    // 对响应数据做点什么
    return response
  },
  async function (error) {
    // 判断是不是401错误
    if (error.response.status === 401) {
      try {
        // 代表token失效,就利用refresh_token去获取一个最新token
        // 细节:此时请求不要用request发请求,要用axios或者重新创建的axios对象来发
        let res = await axios({
          url: 'http://toutiao.itheima.net/v1_0/authorizations',
          method: 'put',
          headers: {
            Authorization: 'Bearer ' + store.state.tokenObj.refresh_token
          }
        })

        // 保存到本地存储和vuex
        // 注意:上面的请求只会得到最新的token,不能直接赋值给vuex,不然会导致refresh_token丢失
        // 所以赋值时要自己拼接一个新的对象,里面既有token也有refresh_token
        store.commit('changeTokenObj', {
          token: res.data.data.token,
          refresh_token: store.state.tokenObj.refresh_token
        })

        // 把原本的请求再发一次,然后把结果返回,那么在我的页面就能拿到它原本想要的结果了
        // 解惑:为什么一样的请求之前发报错,现在发可以?因为原本报错是因为token失效,但现在token已经是最新的正确的了
        return request(error.config)
      } catch {
        // 来到catch只能说明连refresh_token它都有问题了
        // 那么就直接打回登录页,让它重新登录
        // 弹出提示
        Toast.fail('登录状态失效请重新登录')
        router.push('/login')
      }
    }
    // 对响应错误做点什么
    return Promise.reject(error)
  }
)

// 暴露出去
export default request


